<template>
  <el-dialog
      title="新增菜单"
      v-el-drag-dialog
      v-if="showDom"
      :visible.sync="visible"
      width="700px"
      center
      @closed="closed">
    <div class="libBody">
      <el-form
          :model="form"
          :rules="rules"
          ref="formName"
          size="small"
          label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="父级菜单">
              <el-input v-model="form.parentName"
                        readonly
                        placeholder="请选择"
                        @click.native="selectPrev()"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单类型" prop="menuType">
              <el-select v-model="form.menuType">
                <el-option label="根节点" value="L"></el-option>
                <el-option label="树节点" value="M"></el-option>
                <el-option label="子节点" value="N"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单名称" prop="menuName">
              <el-input v-model="form.menuName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="组件路径" prop="menuComponet">
              <el-input v-model="form.menuComponet"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单地址" prop="menuUrl">
              <el-input v-model="form.menuUrl"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="路由名称" prop="routerName">
              <el-input v-model="form.routerName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单图标">
              <el-input v-model="form.menuIcon"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单状态" prop="menuStatus">
              <el-select v-model="form.menuStatus">
                <el-option label="显示" :value="1"></el-option>
                <el-option label="隐藏" :value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="操作权">
              <el-radio-group v-model="form.isAuthority">
                <el-radio label="0">是</el-radio>
                <el-radio label="1">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序" prop="sort">
              <el-input type="number" v-model="form.sort"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" class="bz">
              <el-input type="textarea" v-model="form.remarks"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button size="small" type="" @click="hide">关 闭</el-button>
      <el-button size="small" type="primary" @click="confirmTap">添 加</el-button>
    </div>

    <el-dialog
        width="400px"
        title="父级菜单"
        :center="true"
        :visible.sync="innerVisible"
        append-to-body>
      <el-scrollbar style="height: 100%">
        <el-tree
            :data="TreeData"
            check-strictly
            show-checkbox
            node-key="id"
            :props="defaultProps"
            ref="treeList"
            @check="checkHandler">
        </el-tree>
      </el-scrollbar>
      <div class="dialog-footer">
        <el-button @click="closeN">取 消</el-button>
        <el-button type="primary" @click="addTreeBtn()">确 定</el-button>
      </div>
    </el-dialog>

  </el-dialog>
</template>

<script>
import {put_menuAdd, get_getRoleTree} from "@/apis/user/userApi";
import {getCookie} from '@/utils/auth'
import {menuFilter} from '@/utils'

export default {
  props: {},
  data() {
    return {
      showDom: false,
      visible: false,
      innerVisible: false,
      form: {
        menuComponet: "",
        menuName: "",
        menuStatus: "",
        menuUrl: "",
        menuIcon: "",
        menuType: "",
        remarks: "",
        isAuthority: "1",
        parentId: "",
        menuAuthority: "",
        sort: 10
      },
      rules: {
        menuType: [
          {required: true, message: "请选择菜单类型", trigger: "change"}
        ],
        menuComponet: [
          {required: true, message: "请输入组件路径", trigger: "blur"}
        ],
        menuName: [
          {required: true, message: "请输入菜单名称", trigger: "blur"}
        ],
        menuUrl: [
          {required: true, message: "请输入菜单地址", trigger: "blur"}
        ],
        menuStatus: [
          {required: true, message: "请选择菜单状态", trigger: "change"}
        ],
      },
      TreeData: [],
      defaultProps: {
        children: "children",
        label: "title",
      }
    };
  },
  computed: {},
  mounted() {

  },
  created() {

  },
  methods: {
    show() {
      this.showDom = true
      this.visible = true
      this.getTree()
      this.$nextTick(() => {
        this.form = {
          menuComponet: "",
          menuName: "",
          menuStatus: "",
          menuUrl: "",
          menuIcon: "",
          menuType: "",
          remarks: "",
          isAuthority: "1",
          parentId: "",
          menuAuthority: "",
          sort: 10
        };
        this.$refs.formName.resetFields();
      })
    },
    hide() {
      this.visible = false
    },
    closed() {
      this.showDom = false
    },
    closeN() {
      this.innerVisible = false;
    },
    selectPrev() {
      this.innerVisible = true;
      if (this.form.parentId) {
        this.$nextTick(() => {
          this.$refs.treeList.setCheckedKeys([this.form.parentId]);
        })
      }
    },
    getTree(type) {
      get_getRoleTree({id: JSON.parse(getCookie("userInfo")).id}).then((res) => {
        let {data, code} = res.data;
        if (code === 0) {
          this.TreeData = data;
        }
      });
    },
    checkHandler(node, list) {
      this.treeItem = node;
      if (list.checkedKeys.length >= 2) {
        // 单选实现
        this.$refs.treeList.setCheckedKeys([node.id]);
      }
    },
    // 确认选择
    addTreeBtn() {
      let arr = this.$refs.treeList.getCheckedNodes(false, true);
      if (arr.length === 0) {
        this.$message.error("请先选择所属父级菜单");
      } else {
        this.form.parentId = this.treeItem.id;
        this.form.parentName = this.treeItem.title;
        this.$refs.treeList.setCheckedKeys([]);
        this.innerVisible = false;
      }
    },
    // 确定添加lib
    confirmTap() {
      this.$refs["formName"].validate((valid) => {
        if (valid) {
          put_menuAdd(this.form).then((res) => {
            let {code, msg} = res.data;
            if (code === 0) {
              this.$message.success(msg);
              this.hide()
              this.$emit('success')
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
  .form-box-group {
    max-height: 500px;
    overflow: hidden;
    overflow-y: auto;
  }

  .form-box-item {
    padding: 15px 50px 15px 15px;
    border-bottom: solid 1px #ffffff;

    &:last-child {
      border-bottom: none;
    }
  }
</style>